  $(function() {
      var styleText = '\
        .c-topmenu{\
          position: absolute;\
          z-index: 99999;\
          font-size: 15px;\
        }\
        .c-topmenu .c-tm-list {\
          border: solid 1px #CCCCCC; \
          background: #FFFFFF;\
          box-shadow: 0px 0px 4px #ccc;\
          width: 200px; \
        }\
        .c-topmenu .c-tm-item {\
          border-bottom: solid 1px #CCCCCC;\
          line-height: 24px;\
          padding: 3px 5px;\
          cursor: pointer;\
          position: relative;\
        }\
        .c-topmenu .c-tm-item:hover {\
          background: #eeeeee;\
        }\
        .c-topmenu .c-tm-item:last-child {\
          border-bottom: none;\
        }\
        .c-topmenu img {\
          width: 20px;\
          height:20px;\
          margin-right: 3px;\
          visibility: hidden;\
          display: inline-block;\
          vertical-align: middle;\
        }\
        .c-topmenu img[src] {\
          visibility: visible;\
        }      \
        .c-topmenu a {\
          color: #000000;\
          display: inline-block;\
          vertical-align: middle;  \
          text-decoration: none;      \
        }\
        .c-topmenu .c-tm-arrow:after {\
          position: absolute;\
          right: 8px;\
          top: 10px;\
          content: "";\
          width: 12px;\
          height: 12px;\
          border-top: solid 1px #bcbcbc;\
          border-right: solid 1px #bcbcbc;\
          transform: rotate(45deg);\
          \
        }\
        .c-topmenu .c-tm-lv-2{\
          position: absolute;\
          top: 0;\
          left: -100%;\
        }\
        .c-topmenu-mask {\
          position: fixed;\
          z-index: 99998;\
          top: 0;\
          right: 0;\
          left: 0;\
          bottom: 0;\
          height:100%;\
          width: 100%;\
        }\
        .c-topmenu-btn {\
          color: #000;\
          position: absolute;\
          right: 26px;\
          top: 10px;\
          font-size: 15px;\
          /* font-weight: normal; */\
          cursor: pointer;\
          text-decoration: underline;\
        }';
        
        var data;
        var menu = '<div class="c-topmenu" style="display:none;"><div class="c-tm-list"></div></div><div class="c-topmenu-mask" style="display: none;"></div>'
        var listTmpl = '<div class="c-tm-list" style="display:none;"></div>'
        var itemTmpl = '<div class="c-tm-item"><div><img /><a target="_top"></a></div></div>'
        function init(){
          data = getData()
          if(!data){
            console.log('get data error');
            return;
          }
          if(!$(".panel-title")[0]){
            console.log("panel-title not found")
            return;
          }          
          create(data);
          bindEvent();
        }
        
        function getData(){
          var data;
          try {
            data = JSON.parse(sessionStorage["contextMenuData"]);
          }catch(e){}
          return data;
        }

        function create(d){
          $(".panel-title").each(function(){
            if($(this).attr("hidemenu") == "true") {
              return;
            }  
            $(this).append('<b href="javascript:;" class="c-topmenu-btn">菜单</b>'); 
            if($(".panel-title").parent().css("position") == "static"){
              $(".panel-title").parent().css("position", "relative");
            } 
          })
          
          var list = $(menu);
          for(var i = 0; i < d.length; i++){
            var item = $(itemTmpl);
            var o = d[i];
            item.addClass("c-tm-arrow");
            item.find("a").text(o.menu_name)
            if(o.children && o.children.length) {
              var subList = $(listTmpl);
              subList.addClass("c-tm-lv-2");
              for(var t = 0; t < o.children.length; t++){
                var n = o.children[t];
                var subItem = $(itemTmpl);
                subItem.find("a").text(n.menu_name).attr("href", n.menu_href_full);
                subList.append(subItem);                      
              }
              item.append(subList);
            }
            list.children(".c-tm-list").append(item)
          }
          $(document.body).append(list);
          var h = $("<style></style>");
          h.html(styleText);
          $(document.body).append(h);
        }
        
        function bindEvent() {
          $(".c-topmenu-btn").on("click", function(){
            var x = document.documentElement.clientWidth - ($(this).offset().left + $(this).width());
            var y = $(this).position().top + $(this).height();
            $(".c-topmenu").css("cssText", "display: block; right: " + x + "px;top: " + y + "px;");
            $(".c-topmenu-mask").show();                  
          })       
          $(".c-topmenu-mask").on("click", function(){
            hideMenu();
          })       
          $(".c-topmenu").on("click", ".c-tm-item", function(e){
            if($(this).find("a[href]")[0]){
              hideMenu(); 
            }
            e.stopPropagation();
          })      
          .on("mouseenter", ".c-tm-item", function(e){   
            $(this).children(".c-tm-list").show();  
          })
          .on("mouseleave", ".c-tm-item", function(e){   
            $(this).children(".c-tm-list").hide();  
          })
        }

        function hideMenu(){
          $(".c-topmenu-mask, .c-topmenu").hide();
        }
        
        init();
  });